.background-colour{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 555rpx;
	background: linear-gradient(27deg, #D6F6FC 0%, #EAFCE1 59%, #B2FACD 100%);
	.background-colour-mask{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 383rpx;
		background: linear-gradient(to top, #F5F5F5 0%, rgba(255,255,255,0) 100%);
	}
}
.scroll-content{
	padding: 0 30rpx;
	.top-piece{
		padding-top: 30rpx;
		.top-piece-cell{
			position: relative;
			width: 335rpx;
			height: 300rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(17,181,156,0.1);
			border-radius: 10rpx;
			.piece-cell-image{
				width: 286rpx;
				height: 286rpx;
				position: absolute;
				top: 0;
				left: 19rpx;
			}
			.piece-cell-bottom{
				position: absolute;
				bottom: 0;
				left: 0;
				
				width: 335rpx;
				height: 110rpx;
				border-radius: 0rpx 0rpx 10rpx 10rpx;
				
				.piece-cell-top{
					padding-top:17rpx;
					padding-left: 30rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
				}
				.piece-cell-date{
					padding-left: 30rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					.cell-date-number{
						padding:0 10rpx;
						font-size: 40rpx;
						font-family: 'din',DINAlternate-Bold, DINAlternate;
						font-weight: bold;
					}
				}
				.cell-bottom-programme{
					padding: 28rpx 20rpx 0 20rpx;
					.bottom-programme-title{
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #333333;
					}
					.bottom-programme-number{
						font-size: 40rpx;
						font-family: 'din',DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #1DC691;
					}
					.bottom-programme-unit{
						padding: 4rpx 10rpx 0 7rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #1DC691;
					}
				}
			}
			.piece-cell-head{
				padding-top:20rpx;
				padding-left: 50rpx;
				.cell-head-image{
					width: 70rpx;
					height: 70rpx;
					box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0,0,0,0.5);
					border: 3rpx solid #FFFFFF;
					border-radius: 50%;
					margin-left: -20rpx;
				}
				.cell-head-omit{
					padding-top:11rpx;
					padding-left:30rpx;
					
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
			.piece-cell-people{
				padding-top:24rpx;
				padding-left:21rpx;
				width: 245rpx;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1DC691;
				line-height: 33rpx;
			}
		}
	}
	.first-piece{
		position: relative;
		height: 160rpx;
		background: linear-gradient(136deg, #F8DC8B 0%, #FFCF41 100%);
		border-radius: 10rpx;
		
		padding-left:110rpx;
		
		.first-piece-image{
			width: 100rpx;
			height: 141rpx;
			
			position: absolute;
			left:16rpx;
			bottom: 0;
		}
		.first-piece-head{
			width: 80rpx;
			height: 80rpx;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0,0,0,0.1);
			border: 3rpx solid #FFFFFF;
			border-radius: 50%;
		}
		.first-piece-info{
			padding-left: 6rpx;
			.piece-info-userName{
				max-width: 180rpx;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
		.piece-info-weight{
			padding-left: 60rpx;
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #9D631F;
			
			.info-weight-number{
				padding: 0 4rpx;
				
				font-size: 40rpx;
				font-family: 'din',DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #9D631F;
			}
		}
	}
	.date-piece{
		position: relative;
		/*height: 200rpx;*/
		min-height: 200rpx;
		background: #06DCBC;
		border-radius: 10rpx;
		padding-left:40rpx;
		padding-bottom: 20rpx;
		.date-piece-float{
			position: absolute;
			padding-left: 40rpx;
			width: 178rpx;
			right: 49rpx;
			bottom: 0;
			.date-piece-btn{
				margin-bottom: 108rpx;
				margin-right: 20rpx;
				.piece-btn-text{
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					padding-right: 10rpx;
				}
			}
			.date-piece-image{
				position: absolute;
				width: 178rpx;
				right: 0;
				bottom: 0;
			}
		}
		
		.date-piece-info{
			padding-top: 35rpx;
			padding-right: 75rpx;
			.date-piece-clockin{
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				.-piece-clockin-number{
					padding: 0 8rpx;
					font-size: 44rpx;
					font-family: 'din',DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
			
		}
		.date-piece-is{
			width: 400rpx;
			padding-top:30rpx;
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
		}
	}
	.star-piece{
		padding:5rpx 5rpx;
		height: 540rpx;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(24,62,56,0.04);
		/*border: 5rpx solid;*/
		background: linear-gradient(360deg, rgba(255, 223, 208, 1), rgba(251, 155, 124, 1));
		/*border-image: linear-gradient(360deg, rgba(255, 223, 208, 1), rgba(251, 155, 124, 1)) 5 5;*/
		border-radius: 10rpx;
		.star-piece-content{
			position: relative;
			height: 100%;
			background:#ffffff;
			border-radius: 4rpx;
			
			background: linear-gradient(360deg, #FFFFFF 0%, #FFF9ED 100%);
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(24,62,56,0.04);
			border-radius: 10rpx;
			
			.star-piece-image{
				position:absolute;
				width: 100%;
			}
			.star-piece-scroll{
				padding-top:140rpx;
				white-space: nowrap;
				width: 100%;
				.piece-scroll-item{
					display: inline-block;
					width: 200rpx;
					height: 360rpx;
					position: relative;
					.scroll-item-cell{
						position:absolute;
						
						left:0;
						
						width: 180rpx;
						height: 220rpx;
						background: linear-gradient(360deg, #FFFFFF 0%, #FAEED6 100%);
						border-radius: 20rpx 20rpx 0rpx 0rpx;
						
						.item-cell-head{
							position:absolute;
							top:-63rpx;
							left:50%;
							transform: translateX(-50%);
							border: .3rpx solid #999999;
							border-radius: 50%;
							.cell-head-image{
								width: 120rpx;
								height: 120rpx;
								border: 6rpx solid #FAEED7;
								border-radius: 50%;
							}
							.cell-head-crown{
								position:absolute;
								left:7rpx;
								top:-20rpx;
								width: 37rpx;
								height: 36rpx;
							}
						}
						
					}
					.item-cell-name{
						padding-top:68rpx;
						text-align: center;
						width: 120rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #333333;
						
						white-space: nowrap;
						overflow: hidden;  
						text-overflow: ellipsis;  
					}
					.item-cell-describe{
						padding-top:13rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
					.item-cell-label{
						margin-top: 14rpx;
						width: 120rpx;
						height: 40rpx;
						background: linear-gradient(117deg, #F1DFB3 0%, #DEBC7C 100%, #DEBC7C 100%);
						border-radius: 20rpx;
						
						text-align: center;
						line-height: 40rpx;
						
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #1A1A1A;
					}
				}
			}
			
		}
	}
	.grad-piece{
		padding:5rpx 5rpx;
		height: 340rpx;
		/*background: linear-gradient(360deg, #FFFFFF 0%, #FFFAF0 100%);*/
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(24,62,56,0.04);
		border-radius: 10rpx;
		
		/*border: 5rpx solid;*/
		background: linear-gradient(360deg, rgba(253, 203, 179, 1), rgba(255, 222, 208, 1));
		/*border-image: linear-gradient(360deg, rgba(253, 203, 179, 1), rgba(255, 222, 208, 1)) 5 5;*/
		.grad-piece-content{
			
			width: 100%;
			position:relative;
			background: linear-gradient(360deg, #FFFFFF 0%, #FFFAF0 100%);
			height: 100%;
			border-radius: 8rpx;
			padding: 0 20rpx;
			.grad-piece-image{
				position:absolute;
				width: 600rpx;
				top:-48rpx
			}
			.grad-piece-item{
				padding:120rpx 0 0 0;
				width: 25%;
				
				display: flex;  
				align-items: flex-end;
				padding-bottom: 24rpx;
				.item-cell-head{
					border: 0.5rpx solid #999999;
					border-radius: 50rpx;
					width: 105rpx;
					height: 105rpx;
					.cell-head-image{
						width: 100rpx;
						height: 100rpx;
						border: 5rpx solid #FAEED7;
						border-radius: 50rpx;
					}
				}
				.item-cell-name{
					padding-top:6rpx;
					width: 120rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #333333;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;  
					text-overflow: ellipsis;  
				}
				.item-cell-describe{
					padding-top:9rpx;
					width: 130rpx;
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
					text-align: center;
				}
			}
			.grad-piece-null{
				flex: 1;
				width: 130rpx;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #999999;
				text-align: center;
			}
		}
	}
}
